import React from "react";
/*
  受控组件的使用步骤固定查看下面的1.0到5.0标号的步骤
*/
export default class CtrlComp extends React.Component {
  // 1.0 定义一个状态属性 txt 用来给文本框绑定的
  state = {
    txt: "hello",
  };
  handerChange = (e) => {
    // 4.0 通过事件对象获取到当前文本框的输入内容
    let val = e.target.value;
    // 5.0 将文本框中的输入内容修改到state.txt属性中
    this.setState({
      txt: val,
    });
  };

  login = () => {
    // 获取用户输入的文本框值
    let text = this.state.txt;
    console.log(text);
  };
  render() {
    return (
      <div>
        {/* 2.0 将状态txt绑定到文本框的value属性，用来控制元素 value={this.state.txt}*/}
        {/* 3.0 注册一个内容改变事件  onChange={this.handerChange}*/}
        <input
          type="text"
          value={this.state.txt}
          onChange={this.handerChange}
        />
        <br />
        <hr />
        txt值：
        {this.state.txt}
        <br />
        <hr />
        <button onClick={this.login}>登录</button>
      </div>
    );
  }
}
